html{
    /* css 属性会继承 */
    font-size: 10px;
    background: url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
    background-size: cover;
}
body,html{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
.keys{
    /* 弹性布局，flex:1;使得每个元素都是1：1 */
    display: flex;
    flex: 1;
    /* vh 适配多设备单位 100 vh 表示全屏 */
    min-height: 100vh;
    background-color: red;
    /* text-align: center; 弹性布局不能够使用这种居中方式 */
    justify-content: center;
    /* 弹性布局中垂直居中 */
    align-items: center;
}
.key{
    /* rem */
    border: 0.4rem solid #000;
    border-radius: 0.5rem;
    margin: 1rem;
    padding: 1rem 0.5rem;
    font-size: 1.5rem;
    width: 10rem;
    text-align: center;
    color: white;
    background: rgba(0,0,0,.4);
    text-shadow: 0 0 .5rem #000;
    /* all 对于所有css效果都有用，ease 是由慢到快的一种过渡 */
    transition: all .07s ease;
}
.playing {
    transform: scale(1.1);
    border-color: #ffc600;
    box-sizing: 0 0 1rem #ffc600;
}